<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">
        <el-col :span="10" :offset="7" :xs="24" style="margin-bottom: 40px;">
          <el-card  class="clearfix" :body-style="{ textAlign: 'center',padding: '20px 60px',fontWeight: 'bold', fontSize: '26px' }">
            <div>个人中心</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>用户名称：</div>
            <div class="grenn">{{user.name}}</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24" style="margin-top: 10px;">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>用户手机号：</div>
            <div class="grenn">{{user.account}}</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24" style="margin-top: 10px;">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>用户是否超级管理员：</div>
            <div class="grenn">{{user.isSuperAdmin?'是':'否'}}</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24" style="margin-top: 10px;">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>用户是否管理员：</div>
            <div class="grenn">{{user.isAdmin?'是':'否'}}</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24" style="margin-top: 10px;">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>用户是否激活：</div>
            <div class="grenn">{{user.isActive?'是':'否'}}</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24" style="margin-top: 10px;">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>部门负责人：</div>
            <div class="grenn">{{user.department.name}}</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24" style="margin-top: 10px;">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>用户所属公司：</div>
            <div class="grenn">{{user.tenant.name}}</div>
          </el-card>
        </el-col>
        <el-col :span="10" :offset="7" :xs="24" style="margin-top: 10px;">
          <el-card  class="clearfix" :body-style="{ display: 'flex',justifyContent: 'space-between',padding: '20px 60px',fontWeight: 'bold' }">
            <div>用户拥有权限：</div>
            <div v-for="val in user.roles" :key="val.id" class="grenn">{{val.name}}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'
import { getUserId } from '@/api/user'

export default {
  name: 'Profile',
  components: { UserCard, Activity, Timeline, Account },
  data() {
    return {
      user: {},
      activeTab: 'activity'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      var id = JSON.parse(localStorage.getItem('user_id'));
      getUserId(id).then((res)=>{
        this.user = res.result;
      })
    }
  }
}
</script>
<style scoped>
.el-card__body{
  display: flex;
  justify-content: space-between;
}
.grenn{
  color: #42b983;
}
</style>
